<template>
  <div class="demo">
    <div class="demo-title">前置/后置标签</div>
    <div class="demo-content">
      <Space direction="vertical">
        <InputNumber v-model:value="value1" addon-before="+" addon-after="$"></InputNumber>
        <InputNumber v-model:value="value2">
          <template #addonBefore>
            <Select v-model:value="addonBeforeValue" style="width: 60px">
              <Select.Option value="add">+</Select.Option>
              <Select.Option value="minus">-</Select.Option>
            </Select>
          </template>
          <template #addonAfter>
            <Select v-model:value="addonAfterValue" style="width: 60px">
              <Select.Option value="USD">$</Select.Option>
              <Select.Option value="EUR">€</Select.Option>
              <Select.Option value="GBP">£</Select.Option>
              <Select.Option value="CNY">¥</Select.Option>
            </Select>
          </template>
        </InputNumber>
        <InputNumber v-model:value="value3">
          <template #addonAfter><SettingOutlined /></template>
        </InputNumber>
        <InputNumber v-model:value="value4">
          <template #addonAfter>
            <Cascader placeholder="cascader" style="width: 150px" />
          </template>
        </InputNumber>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { SettingOutlined } from '@ant-design/icons-vue';
  import Cascader from '@sscd/cascader';
  import Select from '@sscd/select';
  import InputNumber from '@sscd/input-number';
  const value1 = ref(100);
  const value2 = ref(100);
  const value3 = ref(100);
  const value4 = ref(100);
  const addonBeforeValue = ref('add');
  const addonAfterValue = ref('USD');
</script>
